Day21—— JavaScript 物件的淺拷貝、深拷貝

2024 iThome 鐵人賽

佛心分享-IT 人自學之術

JavaScript自學分享系列第 21 篇

16th鐵人賽

姐姐恩

2024-10-13 21:05:42

47 瀏覽

分享至

大家好～我是姐姐恩！身為資訊小白的我，起初對於參賽主題非常苦惱，最後決定利用此次機會，延續學校的課(Java)，了解網頁前端三劍客之一的JavaScript！
所以接下來30天，我將在這裡紀錄我當天的學習筆記及統整後的學習內容，請大家多多指教！
＊學習內容主要取自MDN Web Docs及彭彭老師的YT課程。

JavaScript 物件的淺拷貝、深拷貝

物件的拷貝與否，將決定原物件是否會被更改。

淺拷貝Shallow Copy： 僅拷貝物件資料。（常見的拷貝工具都是淺拷貝）
語法:

let a ={x:3, y:4, data:[1,2,3]};

//使用其餘運算符號...拷貝。
let b={...a}; //將a物件的資料複製並放入新的b物件。

//使用內建方法 Object.assign()拷貝。
let c =Object.assign({},a);

淺拷貝的特性:

第二層以上的資料不會真的拷貝，只會參考原來的物件a中的相同物件或陣列實體。
對拷貝後的新物件b進行改動，將會影響到原物件a。

深拷貝Deep copy： 完全拷貝物件底下所有層次的資料。
語法:

let a={x:3, y:4, data:[1,2,3]}; //根據字串結構字串化。
let str=JSON.stringify(a); //根據字串化的資料重新建立物件結構。
lat b=JSON.parse(str);

深拷貝的特性:

建立兩個完全獨立的物件實體。
在物件b所做的更動不會影響物件a。

JSON方法的限制: JSON方法無法拷貝不能字串化的資料，例如函式、Symbol。

程式碼練習&註解筆記:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>JS 物件的淺拷貝、深拷貝</title>
    </head>
    <body>
        <script>
            /*
            //淺拷貝的觀察測試
            let a=[0,1,{x:2,y:3}]; //有兩層結構的物件
            let b=[...a]; //進行淺拷貝。
            //證明第一層的資料會真正拷貝。
            b[0]=10;
            console.log(a[0]); //不會影響a，將印出0。
            //證明第二層以及更多層的資料，不會被真正的拷貝。
            b[2].x = 20;
            console.log(a[2].x); //會影響物件a，將印出20。
            */
            //深拷貝的觀察測試
            let a=[0,1,{x:2,y:3}];
            let str = JSON.stringify(a);
            let b = JSON.parse(a); //完成深拷貝，所有層次的資料將被真正的拷貝，變成兩的獨立的物件。

            //證明第二層的資料也會被真正的拷貝。
            b[2].x=20;
            console.log(a); //不會影響物件a，印出2。
        </script>
    </body>
</html>

學習資源:
JavaScript 物件的淺拷貝、深拷貝 - Front End 網頁前端工程教學